import BaseFrame from './BaseFrame';
import * as THREE from 'three';
import vertexShader from '@/shader/flywire/vert.glsl';
import fragmentShader from '@/shader/flywire/frag.glsl';
export default class Flywire extends BaseFrame {
	constructor() {
		super();
		this.initScene();
	}
	initScene() {
		this.camera.position.set(0, 1, 5);
		this.controls.target.set(0, 1, 0);
		const loader = new THREE.TextureLoader();
		const texture = loader.load('/img/texture/point1.png', () => {
			this.initGui();
			this.renderOnce();
		});
		// const curve = new THREE.QuadraticBezierCurve3(new THREE.Vector3(-2, -1, 0), new THREE.Vector3(0, 3, 0), new THREE.Vector3(2, -1, 0));
		const curve = new THREE.ArcCurve(0, 0, 2, Math.PI, Math.PI * 2, true);
		const size = 500;

		const geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(size));
		const index = [];
		for (let i = 0; i <= size; i++) {
			index.push(i);
		}
		geometry.setAttribute('index', new THREE.Float32BufferAttribute(index, 1));

		this.shaderMaterial = new THREE.ShaderMaterial({
			uniforms: {
				//点纹理
				uTexture: {
					value: texture,
				},
				//时间变量
				uTime: {
					value: 0,
				},
				//点数量
				uPointTotalNum: {
					value: size,
				},
				//飞线速度
				uSpeed: {
					value: 4,
				},
				//点的颜色
				uColor: {
					value: new THREE.Color(0x46c2f7),
				},
				//点大小
				uSize: {
					value: 4,
				},
				//分段数
				uSegments: {
					value: 1,
				},
			},
			vertexShader: vertexShader,
			fragmentShader: fragmentShader,
			blending: THREE.AdditiveBlending,
			depthTest: false,
			transparent: true,
		});

		const points = new THREE.Points(geometry, this.shaderMaterial);

		this.scene.add(points);
	}
	initGui() {
		this.gui.add(this.shaderMaterial.uniforms.uSpeed, 'value').min(1).max(10).step(0.01).name('速度');
		this.gui.add(this.shaderMaterial.uniforms.uSize, 'value').min(1).max(10).step(1).name('大小');
		this.gui.add(this.shaderMaterial.uniforms.uSegments, 'value').min(1).max(10).step(1).name('数量');
		this.gui.addColor(this.shaderMaterial.uniforms.uColor, 'value').name('颜色');
	}
	update() {
		this.shaderMaterial.uniforms.uTime.value = this.clock.getElapsedTime();
	}
}
